<template>
  <div v-loading="loading" class="out_storage_detail" element-loading-text="加载中...">
    <div class="main">
      <header class="header">
        <div class="title">
          <div class="text">
            <i class="iconfont icon-detail"></i>
            出库详情
          </div>
          <h-status v-if="DetailStore?.status == 1" type="warning">待审核</h-status>
          <h-status v-if="DetailStore?.status == 2" type="warning">待出库</h-status>
          <h-status v-if="DetailStore?.status == 3" type="info">已驳回</h-status>
          <h-status v-if="DetailStore?.status == 4" type="success">已出库</h-status>
          <h-status v-if="DetailStore?.status == 5" type="error">已作废</h-status>
        </div>
        <div class="btn_group">
          <h-plain-button @click="onPushDownOrderClick">下推工单</h-plain-button>
          <h-plain-button v-permission="'outb_print'" @click="printBtn">打印</h-plain-button>
          <template v-if="DetailStore?.status === 2">
            <h-plain-button v-permission="'outb_out'" @click="outboundBtn">出库</h-plain-button>
            <h-plain-button v-permission="'outb_cancel'" type="error" @click="cancellationBtn">
              作废
            </h-plain-button>
          </template>
        </div>
      </header>

      <div class="divider_line"></div>

      <div class="body">
        <div class="out_storage_info">
          <div class="title">出库信息</div>
          <div class="info_list">
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">出库单号:</div>
                <div class="value">{{ DetailStore?.outboundNo }}</div>
              </div>
              <div class="info_item">
                <div class="label">工单单号:</div>
                <div class="value">
                  <h-link @click="handleOrderNoClick(DetailStore.workId || '')">
                    {{ DetailStore.workNo }}
                  </h-link>
                </div>
              </div>
              <div class="info_item">
                <div class="label">制单日期:</div>
                <div class="value">{{ DetailStore?.createTime }}</div>
              </div>
            </div>
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">单据来源:</div>
                <div class="value">{{ source[DetailStore?.source - 1]?.title }}</div>
              </div>
              <div class="info_item">
                <div class="label">单据类型:</div>
                <div class="value">{{ DetailStore?.type }}</div>
              </div>
            </div>
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">收货类型:</div>
                <div class="value">{{
                  receiptAddrType[DetailStore?.receiptAddrType - 1]?.title
                }}</div>
              </div>
              <div class="info_item">
                <div class="label">收货仓库:</div>
                <div class="value">{{ DetailStore?.receiptStore }}</div>
              </div>
              <div class="info_item">
                <div class="label">收货地址:</div>
                <div class="value">{{
                  DetailStore?.receiptProvince +
                  DetailStore?.receiptCity +
                  DetailStore?.receiptArea +
                  DetailStore?.receiptTown +
                  DetailStore?.receiptAddress
                }}</div>
              </div>
            </div>
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">收货人编号:</div>
                <div class="value">{{ DetailStore?.receiptNo }}</div>
              </div>
              <div class="info_item">
                <div class="label">收货人名称:</div>
                <div class="value"
                  >{{ DetailStore?.receiptName }}&nbsp;{{ DetailStore?.receiptPhone }}</div
                >
              </div>
            </div>
            <div class="info_item_container">
              <div class="info_item">
                <div class="label">单据备注:</div>
                <div class="value">{{ DetailStore?.remark }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 物流信息 -->
        <div v-if="DetailStore?.status == 4" ref="logisticsInfoRef" class="logistics_info">
          <div class="title">物流信息</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">物流名称:</div>
              <div class="value">{{ DetailStore?.logisticsName }}</div>
            </div>
            <div class="info_item">
              <div class="label">单号:</div>
              <div class="value">{{ DetailStore?.logisticsNo }}</div>
            </div>
            <div class="info_item">
              <div class="label">物流备注:</div>
              <div class="value">{{ DetailStore?.logisticsRemark }}</div>
            </div>
          </div>
        </div>

        <!-- 操作日志 -->
        <div ref="operateInfoRef" class="operate_info">
          <div class="title">操作日志</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">制单人:</div>
              <div class="value">{{ DetailStore?.createEmp }}</div>
            </div>
            <template v-if="DetailStore?.rejectTime">
              <div class="info_item">
                <div class="label">驳回人:</div>
                <div class="value">{{ DetailStore?.rejectEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">驳回时间:</div>
                <div class="value">{{ DetailStore?.rejectTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">驳回备注:</div>
                <div class="value">{{ DetailStore?.rejectRemark }}</div>
              </div>
            </template>
            <template v-if="DetailStore?.reviewTime">
              <div class="info_item">
                <div class="label">审核人:</div>
                <div class="value">{{ DetailStore?.reviewEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">审核时间:</div>
                <div class="value">{{ DetailStore?.reviewTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">审核备注:</div>
                <div class="value">{{ DetailStore?.reviewRemark }}</div>
              </div>
            </template>
            <template v-if="DetailStore?.inboundTime">
              <div class="info_item">
                <div class="label">入库人:</div>
                <div class="value">{{ DetailStore?.inboundEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">入库时间:</div>
                <div class="value">{{ DetailStore?.inboundTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">入库备注:</div>
                <div class="value">{{ DetailStore?.inboundRemark }}</div>
              </div>
            </template>
            <template v-if="DetailStore?.cancelTime">
              <div class="info_item">
                <div class="label">作废单操作人:</div>
                <div class="value">{{ DetailStore?.cancelEmp }}</div>
              </div>
              <div class="info_item">
                <div class="label">作废时间:</div>
                <div class="value">{{ DetailStore?.cancelTime }}</div>
              </div>
              <div class="info_item">
                <div class="label">作废备注:</div>
                <div class="value">{{ DetailStore?.cancelRemark }}</div>
              </div>
            </template>
          </div>
        </div>

        <!-- 设备信息 -->
        <div class="product_info">
          <div class="title">设备信息</div>
          <div class="table">
            <el-table
              :border="true"
              :data="commoditys"
              height="100%"
              show-summary
              :summary-method="getSummaries"
              resizable
              stripe
            >
              <!-- 序号 -->
              <el-table-column
                label="序号"
                :fixed="'left'"
                width="60"
                type="index"
                :align="'center'"
              />

              <!-- 物料编码 -->
              <el-table-column
                prop="goodsCode"
                show-overflow-tooltip
                label="物料编码"
                width="150"
              />

              <!-- 合同号 -->
              <el-table-column label="合同号" show-overflow-tooltip width="140" fixed="left" />

              <!-- 设备类型 -->
              <el-table-column show-overflow-tooltip label="设备类型" width="80">
                <template #default="i">
                  {{ i.row.type == 1 ? '成品' : '物料' }}
                </template>
              </el-table-column>

              <!-- 设备名称 -->
              <el-table-column prop="goodsName" show-overflow-tooltip label="设备名称" width="200">
                <template #default="{ row }">
                  <template v-if="[1, 2].includes(row.rowType)">
                    （{{ row.rowType === 1 ? '父项' : row.rowType === 2 ? '子项' : '' }}）
                  </template>
                  {{ row.goodsName }}
                </template>
              </el-table-column>

              <!-- 申请数量 -->
              <el-table-column prop="qty" show-overflow-tooltip label="申请数量" width="90" />

              <!-- 型号 -->
              <el-table-column prop="goodsModel" show-overflow-tooltip label="型号" width="200" />

              <!-- 规格 -->
              <el-table-column
                prop="goodsSpecName"
                show-overflow-tooltip
                label="规格"
                width="200"
              />

              <!-- <el-table-column
                prop="goodsBrand"
                show-overflow-tooltip
                label="品牌"
                min-width="100"
              /> -->

              <!-- 分类 -->
              <el-table-column
                prop="goodsType"
                show-overflow-tooltip
                label="分类"
                min-width="120"
              />

              <!-- 单位 -->
              <el-table-column prop="goodsUnit" show-overflow-tooltip label="单位" width="100" />

              <!-- 出库仓 -->
              <el-table-column prop="store" show-overflow-tooltip label="出库仓" min-width="150" />

              <!-- 仓位 -->
              <el-table-column
                prop="storePosition"
                show-overflow-tooltip
                label="仓位"
                min-width="150"
              />

              <!-- 可用库存 -->
              <el-table-column prop="systemStock" show-overflow-tooltip label="可用库存" width="90">
                <template #header>
                  <span>可用库存</span>
                  <el-tooltip content="可用库存 = 即时库存 - 占用库存" placement="top">
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </template>
              </el-table-column>

              <!-- 出厂编号 -->
              <el-table-column
                prop="stockCodeVos"
                label="出厂编号"
                width="160"
                show-overflow-tooltip
              >
                <template #default="i">
                  {{ i.row.stockCodeVos.map((item) => item.code).join('、') }}
                </template>
              </el-table-column>

              <!-- 单价 -->
              <!-- <el-table-column prop="price" label="单价" show-verflow-tooltip width="100">
                <template #default="scope"> ￥{{ scope.row.price.toFixed(2) }} </template>
              </el-table-column> -->

              <!-- 金额 -->
              <!-- <el-table-column prop="price" show-overflow-tooltip label="金额" width="100">
                <template #default="i"> ￥{{ i.row.price.toFixed(2) }} </template>
              </el-table-column> -->

              <!-- 备注 -->
              <el-table-column prop="remark" show-overflow-tooltip label="备注" width="100" />
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 作废弹窗 -->
    <h-dialog
      v-model="cancellationDialog"
      title="确认作废此出库吗?"
      :loading="cancelConfirmLoading"
    >
      <el-form label-position="top" class="modal_form_content cancel_form">
        <el-form-item label="作废原因">
          <el-input
            v-model.trim="remark"
            maxlength="400"
            placeholder="请填写作废原因"
            type="textarea"
            resize="both"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; gap: 10px">
          <h-button is-modal type="primary" @click="cancellationConfirm">确认</h-button>
          <h-button is-modal @click=";(cancellationDialog = false), (remark = '')">取消</h-button>
        </div>
      </template>
    </h-dialog>

    <!-- 出库弹窗 -->
    <h-dialog v-model="outboundDialog" title="选择出库物流" :loading="outBoundConfirmLoading">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-position="top"
        class="modal_form_content out_storage_form"
        inline-message
      >
        <el-form-item label="物流名称" prop="logisticsName">
          <el-select
            v-model="ruleForm.logisticsName"
            placeholder="物流名称"
            filterable
            clearable
            :remote-method="inputValueLog"
            :loading="loadingEmp"
            remote
            remote-show-suffix
          >
            <el-option
              v-for="(item, index) in Logistics"
              :key="index"
              :value="item.name"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="物流序列号">
          <el-select v-model="ruleForm.logisticsCode" placeholder="物流序列号" filterable disabled>
            <el-option
              v-for="(item, index) in Logistics"
              :key="index"
              :value="item.code"
              :label="item.code"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="物流单号" prop="logisticsNo">
          <el-input v-model.trim="ruleForm.logisticsNo" placeholder="物流单号" />
        </el-form-item>
        <el-form-item label="发货人" prop="sendName">
          <el-select
            v-model="ruleForm.sendStoreId"
            placeholder="请选择"
            filterable
            clearable
            :remote-method="inputValueSch"
            :loading="loadingEmp"
            remote
            remote-show-suffix
            @change="changestoreId"
          >
            <el-option
              v-for="(item, index) in modules"
              :key="index"
              :value="item.id"
              :label="item.userName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="sendPhone">
          <el-input v-model.trim="ruleForm.sendPhone" placeholder="手机号码" />
        </el-form-item>
        <el-form-item label="发货地址" prop="sendProvince">
          <SingleAddress ref="addrsDom" :address="addrsObj" @value-change="addressValChange" />
        </el-form-item>
        <el-form-item label="详细地址" prop="sendAddress">
          <el-input v-model.trim="ruleForm.sendAddress" placeholder="详细地址" maxlength="200" />
        </el-form-item>
        <el-form-item label="出库备注" prop="remark">
          <el-input
            v-model.trim="ruleForm.remark"
            maxlength="400"
            placeholder="备注"
            type="textarea"
            resize="both"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <h-button is-modal type="primary" @click="outboundConfirm">确认</h-button>
        <h-button is-modal @click="resetForm">取消</h-button>
      </template>
    </h-dialog>

    <!-- 选择序列号 -->
    <h-drawer
      v-model="SelectCodeDialog"
      title="选择序列号"
      :width="80"
      :loading="getStoreCodeListLoading"
    >
      <div class="select_code">
        <div class="header">
          <div class="info_list">
            <div class="info_item">
              <div class="label">设备名称:</div>
              <h-tooltip-text
                :text="codeRowObj.goodsName || ''"
                :max-width="100"
                :height="16"
                width="auto"
              />
            </div>
            <div class="info_item">
              <div class="label">设备规格:</div>
              <h-tooltip-text
                :text="codeRowObj.goodsSpecName || ''"
                :max-width="100"
                :height="16"
                width="auto"
              />
            </div>
            <div class="info_item">
              <div class="label">设备类型:</div>
              <h-tooltip-text
                :text="codeRowObj.goodsType || ''"
                :max-width="100"
                :height="16"
                width="auto"
              />
            </div>
            <div class="info_item">
              <div class="label">设备编号:</div>
              <h-tooltip-text
                :text="codeRowObj.goodsType || ''"
                :max-width="100"
                :height="16"
                width="auto"
              />
            </div>
          </div>
          <div class="btn_group">
            <h-plain-button @click="onCreateCode">创建序列号</h-plain-button>
            <el-input
              v-model.trim="keywordCode"
              clearable
              placeholder="请输入序列号"
              @keyup.enter="getInStoreCodeListData"
              @clear="getInStoreCodeListData"
            />
            <h-button type="primary" @click="getInStoreCodeListData">
              <el-icon>
                <Search></Search>
              </el-icon>
              搜索
            </h-button>
          </div>
        </div>
        <div class="table">
          <el-table
            ref="selectCodeRef"
            :border="true"
            :data="getListCode"
            height="100%"
            resizable
            stripe
            :header-cell-style="tableHeaderCellStyle"
            @selection-change="handleSnCodeSelectionChange"
          >
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column show-overflow-tooltip type="selection" width="40" fixed />
            <el-table-column label="序号" width="60" type="index" fixed />
            <el-table-column label="序列号（序列号）" width="160" prop="code" show-overflow-tooltip>
              <template #default="scope">
                <h-link @click="handleToSnCodeDetail(scope.row)">{{ scope.row.code }}</h-link>
              </template>
            </el-table-column>
            <el-table-column label="品牌" prop="goodsBrand" show-overflow-tooltip />
            <el-table-column label="名称" prop="goodsName" show-overflow-tooltip />
            <el-table-column label="型号" prop="goodsModel" show-overflow-tooltip />
            <el-table-column label="规格" prop="goodsSpecName" show-overflow-tooltip />
            <el-table-column label="所属仓库" prop="store" show-overflow-tooltip />
            <el-table-column label="仓位" prop="storePosition" show-overflow-tooltip />
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="paginationRef"
            :list_total="totalCode"
            @size-change="getInStoreCodeListData"
            @current-change="getInStoreCodeListData"
          />
        </div>
      </div>
      <template #footer>
        <h-button is-modal type="primary" @click="confirmSelectCode">确定</h-button>
        <h-button is-modal @click="SelectCodeDialog = false">取消</h-button>
      </template>
    </h-drawer>

    <!-- 创建序列号弹窗 -->
    <h-dialog v-model="CreateCodeDialog" title="创建序列号" :loading="createCodeLoading">
      <el-form
        ref="createCodeRef"
        :model="createCode"
        :rules="CreateCoderules"
        label-position="top"
        class="modal_form_content"
        inline-message
      >
        <el-form-item label="批次名称" prop="name">
          <el-input v-model.trim="createCode.name" placeholder="请输入批次名称" />
        </el-form-item>
        <el-form-item label="序列号类型">
          <el-radio-group v-model="createCode.type" disabled>
            <el-radio :value="1">成品</el-radio>
            <el-radio :value="2">物料</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model.trim="codeRowObj.goodsModel" disabled placeholder="设备型号" />
        </el-form-item>
        <el-form-item label="设备规格">
          <el-input v-model.trim="codeRowObj.goodsSpecName" disabled placeholder="设备规格" />
        </el-form-item>
        <el-form-item label="序列号数量">
          <el-input
            v-model.trim="createCode.codeVos[0].qty"
            placeholder="序列号数量"
            @input="createCode.codeVos[0].qty = createCode.codeVos[0].qty.replace(/[^0-9]/g, '')"
          />
        </el-form-item>
        <el-form-item label="质保周期">
          <el-input
            v-model.trim="createCode.codeVos[0].warrantyDay"
            placeholder="质保周期"
            @input="
              createCode.codeVos[0].warrantyDay = Number(
                createCode.codeVos[0].warrantyDay.toString().replace(/[^0-9]/g, ''),
              )
            "
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <h-button is-modal type="primary" @click="onaddSave">确认</h-button>
        <h-button is-modal @click="CreateCodeDialog = false">取消</h-button>
      </template>
    </h-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, watch, CSSProperties } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { phone, setProvince } from '@/utils/validate'
  import SingleAddress from '../../../components/address/singleAddress.vue'
  import _ from 'lodash'
  import { tableHeaderCellStyle } from '@/utils/tools'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import Pagination from '../../../components/Pagination/index.vue'
  import {
    getOutboundMaterial,
    getOutboundDetail,
    cancelStoreOutbound,
    getStoreCodeList,
    storeEmpAddressPageSelect,
    saveSureStoreOutbound,
    getLogisticsSelectList,
  } from '@/api/store'
  import { addSave } from '@/api/code'
  import userOutbound from './userOutbound'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { SnCode } from './types'
  import routeComponentName from '@/config/route-component-name'
  import { QuestionFilled } from '@element-plus/icons-vue'
  import { usePushDown } from '@/store/modules/pushDown'

  defineOptions({
    name: routeComponentName.storage.outStorageDetail,
  })

  const { setSaleOutboundPushDownInfo } = usePushDown()

  /**
   * 保存之后,审核之前的每个设备选择的序列号
   * 用于审核时选择新序列号然后清空掉后，将审核之前选中的序列号填充到表格里
   */
  const snCodeAfterSave = ref([])

  /**
   * 全局路由对象
   */
  const router = useRouter()

  /**
   * 工单单号点击事件
   * @param {string} orderId - 工单id
   */
  const handleOrderNoClick = (orderId: string) => {
    if (orderId) {
      router.push(`/order/odetail/${orderId}`)
    }
  }

  /**
   * 序列号选择事件
   * @param snCodes - 选择的序列号
   */
  const handleSnCodeSelectionChange = (snCodes: Array<SnCode>) => {
    commoditys.value[codeRowObj.value.index].stockCodeVosTemp = _.cloneDeep(
      snCodeAfterSave.value[codeRowObj.value.index],
    )
    if (snCodes.length > 0) {
      commoditys.value[codeRowObj.value.index].stockCodeVosTemp = _.cloneDeep(snCodes)
    }
  }

  // 确定选择在库序列号
  const confirmSelectCode = () => {
    if (codeRowObj.value.qty != commoditys.value[codeRowObj.value.index].stockCodeVosTemp.length) {
      ElMessageBox({
        message: '录入序列号不能超过出库序列号总数',
        type: 'error',
        title: '提示',
      })
      return
    }
    commoditys.value[codeRowObj.value.index].stockCodeVos = []
    commoditys.value[codeRowObj.value.index].stockCodeVosTemp.forEach((snCode) => {
      commoditys.value[codeRowObj.value.index].stockCodeVos.push(snCode)
    })
    SelectCodeDialog.value = false
  }

  // 点击序列号详情
  const getCode = (row, index: number) => {
    SelectCodeDialog.value = true
    codeRowObj.value = { ...row, index: index }
    commoditys.value[index].stockCodeVosTemp = [
      ..._.cloneDeep(commoditys.value[index].stockCodeVosTemp),
      row,
    ]
    nextTick(() => {
      getInStoreCodeListData()
    })
  }

  const getInStoreCodeListData = async () => {
    let data = {
      goodsId: codeRowObj.value.goodsId,
      goodsSpecId: codeRowObj.value.goodsSpecId,
      keyword: keywordCode.value,
      limit: paginationRef.value.size,
      page: paginationRef.value.current,
      storeId: null,
      storePositionId: null,
      type: codeRowObj.value.type,
    }
    getStoreCodeListLoading.value = true
    await getStoreCodeList(data).then((res) => {
      if (res) {
        totalCode.value = Number(res.data.data.total)
        getListCode.value = res.data.data.rows
        // // 重新渲染 设备信息选择
        commoditys.value[codeRowObj.value.index].stockCodeVosTemp.map((goods) => {
          getListCode.value.map((item) => {
            if (item.id === goods.id) {
              nextTick(() => {
                selectCodeRef.value!.toggleRowSelection(item, undefined)
              })
            }
          })
        })
      }
    })
    getStoreCodeListLoading.value = false
  }

  const handleToSnCodeDetail = (snCode: SnCode) => {
    SelectCodeDialog.value = false
    router.push({ path: `/code/codetail/${snCode.id}/${snCode.tableType}` })
  }

  let { storeType, receiptAddrType, source } = userOutbound()
  const cancellationDialog = ref(false)
  const outboundDialog = ref(false)
  const route = useRoute()

  // 出库商品列表
  const commoditys = ref<Array<OutboundAPIResponse.DetailGood>>([])

  const loading = ref(false)

  // 出库详情
  const DetailStore = ref<OutboundAPIResponse.Detail>({
    cancelEmp: '',
    cancelRemark: null,
    cancelTime: null,
    createEmp: '',
    createTime: '',
    estimateTime: null,
    id: '',
    logisticsName: null,
    logisticsNo: null,
    logisticsRemark: null,
    outboundNo: '',
    receiptAddrType: 0,
    receiptAddress: '',
    receiptArea: '',
    receiptCity: '',
    receiptName: '',
    receiptNo: '',
    receiptPhone: '',
    receiptProvince: '',
    receiptStore: null,
    receiptTown: '',
    rejectEmp: '',
    rejectRemark: null,
    rejectTime: null,
    relationId: '',
    remark: '',
    reverseWritingFailReason: null,
    reverseWritingStatus: 0,
    reviewEmp: '',
    reviewRemark: '',
    reviewTime: '',
    source: 0,
    status: 0,
    storePositionId: '',
    storeType: 0,
    submitType: 0,
    type: '',
    typeId: '',
    updateEmp: '',
    updateTime: '',
    workId: null,
    workNo: null,
    yunxkBillNo: '',
  })

  const remark = ref('') //作废消备注
  const ruleFormRef = ref()
  const addrsDom = ref()
  const addrsObj = ref({
    province: '',
    city: '',
    area: '',
    town: '',
  })
  const ruleForm = ref({
    logisticsCode: '', //物流序列号
    logisticsName: '', //物流名称
    logisticsNo: '', //物流单号
    remark: '', //出库备注
    outBoundMaterialVos: [],
    sendStoreId: null,
    sendAddress: '', // 发货人地址 -详细地址
    sendName: '', //发货人姓名
    sendPhone: '', //发货人手机号

    sendArea: '', //发货人地址 -县/区
    sendCity: '', //发货人地址 -市
    sendProvince: '', //发货人地址 -省
    sendTown: '', //发货人地址 -镇
  })
  const rules: any = ref({
    sendAddress: [{ required: true, message: '详细地址', trigger: ['blur', 'change'] }], // 发货人地址 -详细地址
    sendName: [{ required: true, message: '发货人姓名', trigger: ['blur', 'change'] }], //发货人姓名
    sendPhone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { validator: phone(ruleForm.value.sendPhone), trigger: 'blur' },
    ],
    sendProvince: [
      {
        required: true,
        validator: setProvince(ruleForm.value.sendProvince),
        trigger: ['blur', 'change'],
      },
    ],
  })

  const CreateCoderules = ref({
    name: [{ required: true, message: '批次名称', trigger: ['blur', 'change'] }],
  })
  const keywordCode = ref('')
  const getStoreCodeListLoading = ref(false)

  const codeRowObj = ref(null)
  // 在库选择弹窗
  const SelectCodeDialog = ref(false)

  // 创建序列号
  const CreateCodeDialog = ref(false)
  const createCodeRef = ref()
  const createCode = ref<CodeAPIRequest.Create>({
    codeVos: [
      {
        goodsId: null, //设备ID
        goodsSpecId: null, //设备规格ID
        qty: '1', //生成序列号数量
        warrantyDay: 30, //质保周期/天数
      },
    ],
    name: '', //批次名称
    qty: null, //序列号数量
    type: 1, //序列号类型：1-成品、2-物料
  })
  // 创建序列号弹窗按钮
  const onCreateCode = () => {
    CreateCodeDialog.value = true
    createCode.value = {
      codeVos: [
        {
          goodsId: codeRowObj.value.goodsId, //设备ID
          goodsSpecId: codeRowObj.value.goodsSpecId, //设备规格ID
          qty: codeRowObj.value.qty, //生成序列号数量
          warrantyDay: 30, //质保周期/天数
        },
      ],
      name: '', //批次名称
      qty: null, //序列号数量
      type: codeRowObj.value.type, //序列号类型：1-成品、2-物料
    }
  }
  const paginationRef = ref()
  const totalCode = ref(0)
  const getListCode = ref([])
  const selectCodeRef = ref()
  // 保存
  const createCodeLoading = ref(false)
  const onaddSave = async () => {
    if (!createCodeRef.value) return
    await createCodeRef.value.validate((valid) => {
      if (valid) {
        createCodeLoading.value = true
        createCode.value.qty = createCode.value.codeVos[0].qty

        addSave(createCode.value).then((res) => {
          createCodeLoading.value = false
          if (res) {
            ElMessage({
              showClose: true,
              message: res.data.message,
              duration: 5000,
              plain: true,
              type: res.data.success ? 'success' : 'error',
            })
            if (res.data.success) {
              CreateCodeDialog.value = false
              // nextTick(() => {
              getInStoreCodeListData()
              // })
            }
          }
        })
      }
    })
  }

  // 合计
  const getSummaries = (param) => {
    const { columns, data } = param
    const sums: string[] = []
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[0] = '合计'
        return
      }

      if (column.property === 'qty') {
        let total = 0
        data.forEach((good) => {
          if (!good.isFixed) {
            total += Number(good.qty)
          }
        })
        sums[index] = String(total)
      }

      // if (column.property === 'unitPrice') {
      //   let total = 0
      //   data.forEach((good) => {
      //     if (!good.isFixed) {
      //       total += Number(good.price) * 100
      //     }
      //   })
      //   sums[index] = (total / 100).toFixed(2)
      // }

      // if (column.property === 'price') {
      //   let total = 0
      //   data.forEach((good) => {
      //     if (!good.isFixed) {
      //       total += Number(good.qty) * Number(good.price)
      //     }
      //   })
      //   sums[index] = total.toFixed(2)
      // }
    })

    return sums
  }

  const resetForm = () => {
    if (!ruleFormRef.value) return
    ruleFormRef.value.resetFields()
    outboundDialog.value = false
  }
  // 根据仓库ID获取仓库详情
  const getDetailStoreItem = async () => {
    loading.value = true
    if (route.params.id) {
      await getOutboundDetail(route.params.id as string).then((res) => {
        if (res) {
          if (res.data.code == 20000) {
            DetailStore.value = res.data.data.row
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
            })
          }
        }
      })
    }
    loading.value = false
  }
  // 地址
  function addressValChange() {
    addrsObj.value = addrsDom.value.getSelectAddr()
    ruleForm.value.sendProvince = addrsObj.value.province
    ruleForm.value.sendCity = addrsObj.value.city
    ruleForm.value.sendArea = addrsObj.value.area
    ruleForm.value.sendTown = addrsObj.value.town
  }
  //设备信息
  const getoutStoreList = async () => {
    loading.value = true
    if (route.params.id) {
      await getOutboundMaterial(route.params.id as string).then((res) => {
        if (res) {
          if (res.data.code == 20000) {
            commoditys.value = res.data.data.row.map((o) => {
              snCodeAfterSave.value.push(_.cloneDeep(o.stockCodeVos))
              return { ...o, stockCodeVosTemp: o.stockCodeVos }
            })
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
            })
          }
        }
      })
    }
    loading.value = false
  }
  // 人员仓库变化
  const changestoreId = (n) => {
    modules.value.map((o) => {
      if (n == o.id) {
        ruleForm.value.sendName = o.userName
        ruleForm.value.sendPhone = o.phone
        ruleForm.value.sendAddress = o.address
        ruleForm.value.sendProvince = o.province
        ruleForm.value.sendCity = o.city
        ruleForm.value.sendArea = o.area
        ruleForm.value.sendTown = o.town

        addrsObj.value = {
          province: o.province,
          city: o.city,
          area: o.area,
          town: o.town,
        }
      }
    })
  }
  //仓库及人员地址下拉列表查询
  const valuestoreEmpAddress = ref()
  const inputValueSch = (val) => {
    valuestoreEmpAddress.value = val
  }
  watch(valuestoreEmpAddress, (n) => {
    getstoreEmpAddressPageSelect(n)
  })
  const modules = ref([])
  const loadingEmp = ref(false)
  // 获取仓库人员及地址下拉
  async function getstoreEmpAddressPageSelect(val) {
    loadingEmp.value = true
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    await storeEmpAddressPageSelect(data, DetailStore.value?.storeType).then((res) => {
      if (res.data.success) {
        modules.value = res.data.data.rows
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 5000,
          plain: true,
          type: 'error',
        })
      }
    })
    loadingEmp.value = false
  }
  // 作废
  const cancellationBtn = () => {
    cancellationDialog.value = true
  }

  // 确认作废
  const cancelConfirmLoading = ref(false)
  const cancellationConfirm = () => {
    cancelConfirmLoading.value = true
    let data = {
      remark: remark.value,
    }
    cancelStoreOutbound(data, route.params.id).then((res) => {
      cancelConfirmLoading.value = false
      if (res) {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
          duration: 5000,
          plain: true,
        })
        if (res.data.success) {
          cancellationDialog.value = false
          getDetailStoreItem()
        }
      }
    })
  }
  // 出库
  const outboundBtn = () => {
    outboundDialog.value = true
    getstoreEmpAddressPageSelect('')
    getLogisticsSelectListArr('')
  }
  // 确认出库
  const outBoundConfirmLoading = ref(false)
  const outboundConfirm = async () => {
    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        outBoundConfirmLoading.value = true
        ruleForm.value.outBoundMaterialVos = commoditys.value.map((o) => {
          return {
            stockCodeVos: o.stockCodeVos,
            goodsId: o.goodsId,
            goodsSpecId: o.goodsSpecId,
            id: o.id,
            price: o.price,
            qty: o.qty,
            remark: o.remark,
            storeId: o.storeId,
            storePositionId: o.storePositionId,
            type: o.type,
          }
        })
        saveSureStoreOutbound(ruleForm.value, route.params.id).then((res) => {
          outBoundConfirmLoading.value = false
          if (res) {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: res.data.success ? 'success' : 'error',
              duration: 5000,
              plain: true,
            })
            if (res.data.success) {
              outboundDialog.value = false
              getDetailStoreItem()
            }
          }
        })
      }
    })
  }
  const Logistics = ref([])
  const logisticsName = ref('')
  const inputValueLog = (val) => {
    logisticsName.value = val
  }
  watch(logisticsName, (n) => {
    getLogisticsSelectListArr(n)
  })
  watch(
    () => ruleForm.value.logisticsName,
    (n) => {
      if (n) {
        Logistics.value.map((o) => {
          if (o.name == n) {
            ruleForm.value.logisticsCode = o.code
          }
        })
      } else {
        ruleForm.value.logisticsCode = ''
      }
    },
  )
  // 获取物流列表
  async function getLogisticsSelectListArr(val) {
    loadingEmp.value = true
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    await getLogisticsSelectList(data).then((res) => {
      if (res.data.success) {
        Logistics.value = res.data.data.rows
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 5000,
          plain: true,
          type: 'error',
        })
      }
      loadingEmp.value = false
    })
  }

  // 打印
  const printBtn = () => {
    ElMessage({
      showClose: true,
      message: '正在维护升级中，敬请期待...',
      type: 'success',
      duration: 5000,
      plain: true,
    })
  }

  const tagsViewStore = useTagsViewStore()

  const intoStorageInfoRef = ref<HTMLDivElement | null>(null)
  const intoStorageInfoHeight = () => {
    if (intoStorageInfoRef.value) {
      return intoStorageInfoRef.value.scrollHeight
    }
    return 0
  }

  const operateInfoRef = ref<HTMLDivElement | null>(null)
  const getOperateInfoHeight = () => {
    if (operateInfoRef.value) {
      return operateInfoRef.value.scrollHeight
    }
    return 0
  }

  const logisticsInfoRef = ref<HTMLDivElement | null>(null)
  const getLogisticsInfoHeight = () => {
    if (logisticsInfoRef.value) {
      return logisticsInfoRef.value.scrollHeight
    }
    return 0
  }

  const productInfoStyle = ref<CSSProperties>({})
  const setProductInfoStyle = () => {
    productInfoStyle.value.height = `calc(100% - ${intoStorageInfoHeight()}px - ${getOperateInfoHeight()}px - ${getLogisticsInfoHeight()}px - 36px)`
  }

  /**
   * 下推工单点击事件
   */
  const onPushDownOrderClick = () => {
    const good = commoditys.value[0]
    if (good) {
      setSaleOutboundPushDownInfo(
        {
          address: '',
          area: '',
          buyMarket: '',
          buyTime: '',
          city: '',
          codes: [],
          endTime: '',
          goodsBrand: '',
          goodsBrandId: '',
          goodsCode: '',
          goodsId: '',
          goodsModel: '',
          goodsName: '',
          goodsSpec: '',
          goodsSpecId: '',
          goodsType: '',
          id: '',
          province: '',
          qty: 0,
          saleModels: null,
          town: '',
          userId: '',
          userName: '',
          userPhone: '',
          workGoodsAnnexVos: [],
          repairId: null,
          repairNo: null,
          dl: null,
          specialBz: null,
          standard: null,
          voltage: null,
          xlh: good.xlh,
          isStandby: good.isStandby,
        },
        {
          address: '',
          archived: false,
          area: '',
          assignEmp: false,
          addressee: '',
          addresseePhone: '',
          city: '',
          contacts: '',
          contactsPhone: '',
          pushbackCount: 0,
          content: '',
          createTime: '',
          currentUseTime: null,
          dispatcOrderTime: '',
          dispatchOrderEngineerTime: '',
          departmentId: '',
          dispatchNetwork: null,
          dispatchEnginerrNetwork: null,
          enableStatementVerifCode: false,
          emp: '',
          endTime: null,
          engineerManagerEmp: '',
          engineerManagerPhone: '',
          engineerReceivingOrderTime: '',
          fault: null,
          faultReason: null,
          faultType: null,
          id: '',
          invoice: false,
          isWorkDay: false,
          isRelationRepair: 0,
          module: '',
          moduleId: '',
          userId: '',
          phone: '',
          project: '',
          name: '',
          network: '',
          networkAddress: '',
          networkId: '',
          networkManaterEmp: '',
          networkManaterPhone: '',
          nodeOverTime: null,
          nodeOverTimetype: null,
          nodeTimeout: false,
          orderCustomFields: [],
          orderImages: [],
          orderNo: '',
          orderType: null,
          orderWay: null,
          otherPhone: '',
          overinsured: false,
          orderTotalFee: 0,
          province: '',
          quotedPriceCheckType: 1,
          repairCompany: '',
          repairCompanyPhone: '',
          repairCompanyUserId: '',
          receivingOrderTime: '',
          reminder: false,
          reminderQty: 0,
          repeatOrder: false,
          repairNo: '',
          repairId: '',
          sendForRepairPhone: '',
          sendForRepairUsername: '',
          solution: [],
          source: 0,
          status: 0,
          suspend: false,
          snCodeStatus: 0,
          totalUseTime: null,
          town: '',
          updateTime: null,
          userName: '',
          videos: [],
          warrantyDay: 0,
          workLevel: '',
          workLevelColor: '',
          workSource: '',
          workSourceId: '',
          openTicket: false,
          userPayment: false,
          workImages: [],
          workSpareStatus: 0,
          checkType: 1,
        },
      )
    }
  }

  onMounted(async () => {
    new Promise(() => {
      getDetailStoreItem()
      getoutStoreList()
    })
    setProductInfoStyle()
    window.addEventListener('resize', setProductInfoStyle)
  })

  watch(
    tagsViewStore.getReloadPages,
    (value) => {
      if (value.includes(route.path)) {
        window.removeEventListener('resize', setProductInfoStyle)
      }
    },
    { immediate: true, deep: true },
  )
</script>

<style lang="scss" scoped>
  .out_storage_detail {
    height: 100%;
    box-sizing: border-box;
    padding: 12px;

    .main {
      box-sizing: border-box;
      padding: 12px;
      background-color: #fff;
      height: 100%;

      .header {
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 12px;
        align-items: center;

        .title {
          display: flex;
          column-gap: 5px;
          align-items: center;
          height: 16px;
          line-height: 16px;

          .text {
            font-size: 14px;
            font-weight: bold;

            .iconfont {
              color: $primaryColor;
            }
          }
        }

        .btn_group {
          display: flex;
          column-gap: 5px;
        }
      }

      .divider_line {
        border-bottom: 1px dotted #e5e5e5;
        margin: 12px 0;
      }

      .body {
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 14px;
        display: flex;
        flex-direction: column;
        row-gap: 18px;
        height: calc(100% - 25px - 28px);

        .out_storage_info {
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .title {
            font-size: 12px;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid #007cff;
          }

          .info_list {
            padding: 0 16px;
            display: flex;
            column-gap: 72px;
            flex-wrap: wrap;
            row-gap: 12px;

            .info_item_container {
              display: flex;
              flex-direction: column;
              row-gap: 12px;

              .info_item {
                display: flex;
                column-gap: 5px;

                .label {
                  color: #606266;
                  text-align: right;
                }

                .value {
                  color: #000;
                  max-width: 600px;
                }
              }
            }

            .alignment_info_item_container {
              .label {
                width: 80px;
                text-align: right;
              }
            }
          }
        }

        .logistics_info {
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .title {
            font-size: 12px;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid #007cff;
          }

          .info_list {
            display: flex;
            column-gap: 32px;
            padding: 0 16px;

            .info_item {
              display: flex;
              column-gap: 5px;

              .label {
                color: #606266;
                white-space: nowrap;
              }

              .value {
                color: #000;
                max-width: 600px;
              }
            }
          }
        }

        .operate_info {
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .title {
            font-size: 12px;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid #007cff;
          }

          .info_list {
            display: flex;
            column-gap: 32px;
            row-gap: 12px;
            padding: 0 16px;
            flex-wrap: wrap;

            .info_item {
              display: flex;
              column-gap: 5px;

              .label {
                color: #606266;
                white-space: nowrap;
              }

              .value {
                color: #000;
                max-width: 600px;
              }
            }
          }
        }

        .product_info {
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .title {
            font-size: 12px;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid #007cff;
          }
        }
      }
    }
  }

  .mark_bg {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .content_inner {
    background-color: #fff;
    padding: 12px;

    .title_bl {
      border-left: #007cff solid 3px;
      padding-left: 5px;
      font-size: 14px;
    }

    .basic_information {
      padding: 8px 8px 12px;

      :deep(.el-form-item__label) {
        color: #000000c9;
        font-size: 12px;
        height: 23px;
        line-height: 23px;
      }

      :deep(.el-form-item--default .el-form-item__content) {
        line-height: 23px;
      }

      .ml {
        font-size: 12px;
        color: #999;
      }
    }
  }
  :deep(.el-table__row) {
    &:hover {
      .add_delete {
        display: block;
        cursor: pointer;
      }

      .order {
        display: none;
      }
    }
  }
  .order {
    display: block;
  }

  .add_delete {
    display: none;

    .add {
      padding-right: 10px;
    }
  }
  .header_code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .left_text {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      p {
        margin-left: 24px;
        color: #999;
        font-size: 12px;

        &:first-child {
          margin-left: 0;
        }

        span {
          color: #000;
          text-overflow: ellipsis;
          max-width: 200px;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .btn_header_code {
      display: flex;
      align-items: center;

      .btn_save {
        width: 5.2vw;
        height: 28px;
        margin-right: 8px;
        border-radius: 4px;
      }
    }

    .btn_selec {
      padding: 0 6px;
      border-radius: 2px;
    }

    .code_info {
      display: flex;
      align-items: center;

      p {
        margin-left: 24px;
        color: #999;

        span {
          color: #000;
        }
      }
    }
  }

  :deep(.el-radio__input.is-disabled) {
    span {
      background: #f5f7fa !important;
      border-color: #e4e7ed !important;
    }

    span.el-radio__label {
      color: #999 !important;
    }
  }

  :deep(.el-radio.is-disabled.is-checked) {
    span.el-radio__label {
      color: #999 !important;
    }
  }

  .footer_code {
    margin-top: 12px;
  }

  .newOut-ruleForm {
    .el-form-item__label {
      font-size: 12px;
    }

    .el-form-item {
      margin-bottom: 18px;
    }
  }
  :deep(.add-dialog) {
    --el-font-size-base: 12px;

    .cards {
      margin: 12px;

      .el-form-item__label {
        --el-form-label-font-size: 12px;
      }

      .item_bottom {
        margin-bottom: 15px;
      }

      .store_name_list {
        max-height: 20vh;
        overflow-y: auto;
      }

      .add_item {
        text-align: center;
        color: #007cff;
        cursor: pointer;
      }
    }

    .el-select .el-input.is-disabled .el-input__wrapper {
      width: 300px;
    }

    .el-input {
      width: 300px !important;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 12px;
      margin-top: 25px;
      flex-direction: row-reverse;
      position: relative;

      .btn {
        height: 35px;
        line-height: 33px;
        padding: 0 15px;
        color: #ffffff;
        border-radius: 2px;
        display: inline-block;
        font-weight: 400;
        border: 1px solid #e5e5e5;
        font-size: 14px;
        cursor: pointer;
      }

      .save {
        border-color: #007cff;
        background-color: #007cff;
      }

      .cancel {
        border-color: #a6a6a6;
        background-color: #a6a6a6;
        margin-left: 5px;
      }
    }
  }

  .cancel_form {
    :deep(.el-textarea) {
      width: 100%;

      .el-textarea__inner {
        width: 100% !important;
        min-height: 75px !important;
        max-height: 150px !important;
      }
    }
  }

  .out_storage_form {
    :deep(.el-textarea) {
      .el-textarea__inner {
        min-width: 100% !important;
        max-width: 650px !important;
        min-height: 50px !important;
        max-height: 150px !important;
      }
    }
  }

  .select_code {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 99%;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info_list {
        display: flex;
        column-gap: 32px;

        .info_item {
          display: flex;
          column-gap: 5px;

          .label {
            color: #606266;
          }

          .value {
            color: #000;
          }
        }
      }

      .btn_group {
        display: flex;
        column-gap: 5px;
      }
    }

    .table {
      max-height: calc(100% - 80px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }

  .code_detail {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 99%;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info_list {
        display: flex;
        column-gap: 32px;

        .info_item {
          display: flex;
          column-gap: 5px;

          .label {
            color: #606266;
          }

          .value {
            color: #000;
          }
        }
      }
    }

    .table {
      max-height: calc(100% - 40px);

      :deep(.el-table__empty-block) {
        height: auto !important;
      }
    }
  }

  .top_app {
    box-sizing: border-box;
    padding: 12px 12px 0;
    background-color: rgb(240, 242, 245);

    .top_h {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.048);
      height: 47px;
      padding: 0px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;

      .text {
        display: flex;
        align-items: center;

        .module_color {
          font-size: 18px;
          font-weight: bolder;
          margin-right: 8px;
        }
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .btn_save {
      width: 50px;
      height: 30px;
      border-radius: 0;
    }

    .btn_delete {
      width: 50px;
      height: 30px;
      border-radius: 0;
    }

    .btn_cancel {
      width: 50px;
      height: 30px;
      border-radius: 0;
    }
  }
  .send-ruleForm {
    max-width: 80%;
    .el-form-item {
      margin-bottom: 18px;
    }
  }
  .cancellation_dialog {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #f56c6c;
  }
  .tip_text {
    margin-bottom: 12px;
  }
  :deep(.el-dialog .el-dialog__body) {
    padding: 20px;
  }

  .text-color {
    color: #007cff !important;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
  }
  .purple_tag {
    color: #6222c2;
    background-color: #f3edff;
  }

  .el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
  }

  .el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
  }

  .el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
  }
</style>
